<template>
  <div class="comments-part">
    <CommentSubmit :aid="aid" @ok="submitComment" />
    <div class="cons-part">
      <div class="comment-item" v-for="item in comments" :key="item.id">
        <div class="wrapper">
          <img class="avatar" :src="head(item.email)" alt="" />
          <div class="comment-main">
            <div v-if="item.url === ''" class="comment-author">
              {{ item.name }}
            </div>
            <a v-else :href="item.url" target="_blank" class="comment-author">{{
              item.name
            }}</a>
            <div class="comment-excerpt">{{ item.text }}</div>
            <div class="comment-meta">
              <div class="time">{{ item.createTime }}</div>
              <div class="reply" @click="reply(item.id)">回复</div>
              <div
                class="reply"
                v-show="replyid == item.id"
                @click="reply(item.id)"
              >
                取消回复
              </div>
            </div>
          </div>
        </div>
        <CommentSubmit
          v-if="replyid == item.id"
          :pid="item.pid == '0' ? item.id : item.pid"
          :aid="aid"
          :reply="`回复“${item.name}”的评论`"
          @ok="submitComment"
        />
        <div
          class="comment-item child"
          v-for="it in item.childrens"
          :key="it.id"
        >
          <div class="wrapper">
            <img class="avatar" :src="head(it.email)" alt="" />
            <div class="comment-main">
              <div v-if="it.url === ''" class="comment-author">
                {{ it.name }}
              </div>
              <a v-else :href="it.url" target="_blank" class="comment-author">{{
                it.name
              }}</a>
              <div class="comment-excerpt">{{ it.text }}</div>
              <div class="comment-meta">
                <div class="time">{{ it.createTime }}</div>
                <div class="reply" @click="reply(it.id)">回复</div>
                <div
                  class="reply"
                  v-show="replyid == it.id"
                  @click="reply(it.id)"
                >
                  取消回复
                </div>
              </div>
            </div>
          </div>
          <CommentSubmit
            v-if="replyid == it.id"
            :pid="item.pid == '0' ? item.id : item.pid"
            :aid="aid"
            :reply="`回复“${it.name}”的评论`"
            @ok="submitComment"
          />
        </div>
      </div>

      <div class="cons-more" @click="loadmore">
        {{ pageUse.end ? "哎呀-没有内容啦" : "加载更多" }}
      </div>
    </div>
  </div>
</template>

<script setup>
import api from "@/http/api";
import { API_BLOG_AID_COMMENTS } from "@/http/url";
import md5 from "js-md5";

const props = defineProps({
  aid: String | Number,
});

const comments = ref([]);
const pageUse = ref({
  page: 1,
  end: false,
});

function head(email) {
  return `https://cravatar.cn/avatar/${md5(email || "")}`;
}

function loadComments() {
  console.log("props.aid ===> " + props.aid);
  api
    .get(API_BLOG_AID_COMMENTS(props.aid), {
      params: {
        current: pageUse.value.page ?? 1,
      },
    })
    .then((res) => {
      if (res.ok) {
        comments.value.push(...res.data.records);
        if (res.data.records.length == 0) {
          pageUse.value.end = true;
        }
      } else {
        ElMessage.warning(res.message);
        pageUse.value.end = true;
      }
    })
    .catch((e) => {
      ElMessage.error(e.message);
      pageUse.value.end = true;
    });
}

const replyid = ref("");

function reply(id) {
  replyid.value = replyid.value == "" || replyid.value != id ? id : "";
}

function submitComment(data) {
  comments.value = [data, ...comments.value];
  replyid.value = "";
}

function loadmore() {
  pageUse.value.page++;
  loadComments();
}

defineExpose({
  loadComments,
});
</script>

<style lang="scss" scoped>
.comments-part {
  .cons-part {
    background-color: #fff;
    padding: 16px;

    .comment-item .wrapper {
      display: flex;
      flex-shrink: 0;

      .avatar {
        display: block;
        width: 45px;
        height: 45px;
        margin: 1rem 1rem 0 0 !important;
        border-radius: 50%;
      }
      .comment-main {
        flex: 1;
        overflow: hidden;
        padding: 1rem 0;
      }
      .comment-author {
        font-size: 14px;
        margin-bottom: 5px;
      }
      .comment-excerpt {
        padding: 0.5rem 0;
      }

      .comment-meta {
        font-size: 0.75rem;
        margin-top: 5px;
        display: flex;
        gap: 16px;
        .time {
          color: #7a8b9a;
        }
        .reply {
          cursor: pointer;
          transition: all 0.3s;
        }
        .reply:hover {
          color: #1e80ff;
        }
      }
    }

    .comment-item {
      border-bottom: 1px solid #ebf2f6;
      &.child {
        padding-left: 60px;
      }
    }
    .comment-item:last-child {
      border: none;
    }
  }
  .cons-more {
    padding: 16px 0;
    text-align: center;
  }
}
</style>
